﻿@using VirtualPress.Tool.Configration;
@model VirtualPress.Portal.Web.Models.RegisterModel        
@{
    Layout = "~/Views/Shared/_Main.cshtml";
}
@section head
{
    <link href="/Content/css/register.css" rel="stylesheet" type="text/css" />
    <link href="/content/css/bootstrap-datetimepicker.min.css" rel="Stylesheet" />
    <link href="/Content/css/unicorn.main.css" rel="Stylesheet" />
    <style type="text/css">
        .add-on
        {
            -webkit-border-radius: 0 3px 3px 0;
            border-radius: 0 3px 3px 0;
            margin-left: -1px;
            vertical-align: top;
            display: inline-block;
            width: auto;
            height: 20px;
            min-width: 16px;
            padding: 4px 5px;
            font-size: 14px;
            font-weight: normal;
            line-height: 20px;
            text-align: center;
            text-shadow: 0 1px 0 white;
            background-color: #EEE;
            border: 1px solid #CCC;
            }
    </style>

}

<div class="container">
    <div class="row">
        <div class="span9">
            <!-- navagation -->
            <ul class="breadcrumb">
                <li><a href="/">首页</a> <span class="divider">/</span></li>
                <li class="active">作者注册</li>
            </ul>
            <form id="form" action="/account/register" method="post">
             <input type="hidden" name="token" />
                <fieldset>
                    <legend>作者注册</legend>
                     <div class="row-fluid">
                        @if (ViewBag.Error != null)
                        {
                         <div class="span8 alert offset2" id="errormsg">
                            @ViewBag.Error
                         </div>
                        }
                        else
                        { 
                         <div class="span8 alert offset2" style="display:none;" id="errormsg"></div>
                        }
                     </div>
                    <div class="control-group row-fluid">
                        <label class="control-label span2 offset1" style="text-align:right;" for="iptAccont">
                            登录帐号</label>
                        <div class="controls span4">
                            <input type="text" id="txtusername" placeholder="example@gmail.com" name="UserName"
                            class="span12 {required:true,email:true,remote:{url:'/account/usernameonly',messages:'该用户名已存在！'}}" />
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label span2 offset1" style="text-align:right;" for="iptPassword">
                            登录密码</label>
                        <div class="controls span8">
                            <input type="password" id="iptPassword" placeholder="密码长度6-20位" name="Password"
                            class="span6 {required:true,minlength:6,maxlength:20}" />
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label span2 offset1" style="text-align:right;" for="iptPasswordAgain">
                            确认密码</label>
                        <div class="controls span8">
                            <input type="password" id="iptPasswordAgain" placeholder="请确保两次输入一致" name="confirm"
                            class="span6 {required:true,equalTo:'#iptPassword'}" />
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label span2 offset1" style="text-align:right;" for="iptName">
                            姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                        <div class="controls span8">
                            <input type="text" id="iptName" placeholder="请输入您的真实姓名" name="NickName" 
                            class="span6 {required:true,minlength:1,maxlength:12}" />
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label span2 offset1" style="text-align:right;" for="selectSex">
                            性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
                        <div class="controls span8">
                            <select id="selectSex" class="span4" name="Gender">
                                <option value="1">先生</option>
                                <option value="0">女士</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label span2 offset1" style="text-align:right;" for="iptbirthday">
                        出生日期</label>
                        <div id="datetimepicker" class="input-append span8">
                            <input class="span5 {required:true,dateISO:true}" data-format="yyyy-MM-dd" type="text"  name="Birthday"/>
                            <span class="add-on">
                                <i class="icon-calendar" data-time-icon="icon-time" data-date-icon="icon-calendar" ></i>
                            </span>
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <span class="control-label span2 offset1" style="text-align:right;">
                        所居地区</span>
                        <div class="span9">
                            <select name="AreaCode" id="sltAreacode" style="width:100px;">
                            </select>
                            <select name="Location" id="sltLocation" style="width:100px;">
                            </select>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                new plug.Control().BuildRelationSelect(
                                    { element: 'sltAreacode'},
                                    { element: 'sltLocation'}, 'province');
                            });
                        </script>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label span2 offset1" style="text-align:right;" for="iptTel">
                            联系电话</label>
                        <div class="controls span8">
                            <input type="text" id="iptTel" placeholder="请输入常用电话" name="Phone"
                            class="span6 {required:true,number:true,minlength:6,maxlength:12}" />
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <span class="control-label span2 offset1" style="text-align:right;">
                        常用QQ</span>
                        <div class="controls span4">
                            <input type="text" id="txtQQ" name="QQ" 
                            class="span12 {required:true, number:true, minlength:4,maxlength:18}" />
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <label class="control-label span2 offset1" style="text-align:right;" for="iptCheckCode">
                            验证码</label>
                        <div class="controls span2">
                            <input type="text" id="iptCheckCode" placeholder="请输入验证码" name="validCode"
                            class="span12 {required:true}" maxlength="4" />
                        </div>
                        <div class="span5">
                            <div id="codeimg" class="span12"> </div>
                        </div>
                    </div>
                    <div class="cntrol-group row-fluid">
                        <div class="controls span1 offset2" style="text-align:right;">
                            <input checked="checked" type="checkbox" id="ckbagreement" />
                        </div>
                        <div class="control-label span5">
                            <label for="ckbagreement">已阅读并同意<a href="/Home/Agreement" target="_blank">@(SiteResource.SiteName)网服务协议</a></label>     
                        </div>
                    </div>
                    <div class="control-group row-fluid">
                        <div class="controls span5 offset2">
                            已经注册帐号？<a href="/Account/Login">请直接登录</a>
                        </div>
                    </div>
                    <div class="cntrol-group row-fluid">
                        <div class="controls span5 offset2">
                            <input type="submit" class="btn btn-primary" value="提交注册" />
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
        <div class="span3">
            <div class="mini-layout" style="height: 500px;">
                <div class="hspace15">
                </div>
                @RenderPage("/views/shared/partial/_Quiklinks.cshtml")
                <div class="hspace15">
                </div>
                <div class="hspace15">
                </div>
                @RenderPage("~/Views/Shared/Partial/_Newjournals.cshtml")
            </div>
        </div>
    </div>
</div>
@section tail{  
    <script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.min.js"></script>
    
    <script type="text/javascript" src="/scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="/scripts/jquery.metadata.js"></script>
    <script type="text/javascript">
        var validation = new plug.BindValidCode();
        $(function () {
            validation.BindValidator();
            $('#datetimepicker').datetimepicker({
                pickTime: false
            });
            $('#form').validate({
                errorClass: "help-inline",
                errorElement: "span",
                highlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').addClass('error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').removeClass('error');
                },
                submitHandler: function (form) {
                    var agreement = $('#ckbagreement').attr('checked');
                    if (!agreement) {
                        $('#ckbagreement').parent().parent().css({ 'color': 'red' });
                        $('#ckbagreement').parent().parent().append(
                            $('<span generated="true" style="color:red;" class="help-inline">requird.</span>')
                        );
                        return false;
                    }
                    var username = $('#txtusername').val();
                    var ispass = false;
                    $.ajax({
                        async: false,
                        url: '/account/usernameonly',
                        data: { 'username': username },
                        cache: false,
                        mode: "abort",
                        success: function (result) {
                            if (/false/i.test(result)) {
                                $('#txtusername').parent().parent().addClass('error');
                                $('#txtusername').parent().parent().append(
                                    $('<span generated="true" class="help-inline">用户名重复.</span>'));
                                $('#txtusername').focus();
                                ispass = false;
                            }
                            else {
                                ispass = true;
                            }
                        }
                    });
                    return ispass;
                }
            });

        });
        function Refalsh(sender) {
            validation.Refalsh(sender);
        }
    </script>
}